"use client"; // This remains since we're using client-side features
import { Provider, useSelector } from "react-redux";
import store, { RootState } from "@/store/client";
import { ReactNode, useState } from "react";
import { initGlobalMessage } from "@/utils/message";

import zhCN from 'antd/es/locale/zh_CN'; // 中文语言包
import enUS from 'antd/es/locale/en_US';
import { ConfigProvider, message, theme, ThemeConfig } from "antd";
// antd 从 v4.0 版本开始，
// 默认使用 dayjs 作为日期处理库来替代 moment。
// 不过，ConfigProvider 的 locale 设置并不会自动加载 dayjs 的语言包。
// 因此，虽然 antd 提供的国际化配置能够处理组件的文本和界面语言，
// 但它并不会自动处理 dayjs 的日期格式化问题。
// 所以，为了确保 dayjs 使用正确的语言环境，
// 需要显式引入 dayjs 的语言包，
// 并手动设置 locale。引入 dayjs/locale/zh-cn
// 是确保日期组件完全中文化的正确方法。
import 'dayjs/locale/zh-cn'; //日期组件中文化



// 内层组件 - 处理主题和配置
function ThemeWrapper({ children }: { children: ReactNode }) {
    const [locale, setLocale] = useState(zhCN); // 默认语言为中文
    // 1. 全局配置（只需调用一次）
    message.config({
        maxCount: 3,
        duration: 2,
        top: 24
    });
    const messageContext = initGlobalMessage();// contextHolder: React 节点（需渲染到 DOM 中，用于挂载消息）
    const isDark = useSelector((state: RootState) => state.theme.isDark);

    return (
        <div className={`theme-container ${isDark ? 'dark' : 'light'}`}>
            {messageContext}
            <ConfigProvider
                locale={locale}
                theme={{
                    algorithm: isDark ? theme.darkAlgorithm : theme.defaultAlgorithm,
                    token: {
                        headerHeight: "30px",
                    } as ThemeConfig['token'],
                }}
            >
                {children}
            </ConfigProvider>
        </div>
    );
}
export default function ReduxProvider({ children }: { children: ReactNode }) {
    return <Provider store={store}>
        <ThemeWrapper>{children}</ThemeWrapper>
    </Provider>
}